<!-- 修改密码 -->
<template>
  <div id="AccountEdit">
    <div class="box">
      <div class="box_header">修改密码</div>
      <div class="box_body">
        <div>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <!-- 输入老密码 -->
            <el-form-item label="原密码" prop="oldPass">
              <el-input v-model="ruleForm.oldPass" type="password" autocomplete="off" />
            </el-form-item>
            <!-- 输入新密码 -->
            <el-form-item label="新密码" prop="newPass">
              <el-input v-model="ruleForm.newPass" type="password" autocomplete="off" />
            </el-form-item>
            <!-- 再次输入密码 -->
            <el-form-item label="再次输入密码" prop="checkPass">
              <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="box_foot">
        <el-button type="primary" @click="handleSureEdit">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();

//检验旧密码
import { fetchLoginTwentyOne } from '../../api/index'
//修改密码
import { fetchLoginTwentyTwo } from '../../api/index'

const ruleFormRef = ref<FormInstance>()

//判断
const vOne = ref(false);
const vTwo = ref(false);
const vThree = ref(false);

//原始密码验证
const validatePassOne = async (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== '') {
    //console.log(value);
    const res = await fetchLoginTwentyOne({ oldPwd: value })
    //console.log(res.data.code);//成功code:11为错误
    if (res.data.code === '11') {
      callback(new Error('原密码错误'))
    } else {
      vOne.value = true;
    }
  }
  callback()
}

// 新密码验证
const validatePassTwo = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
    vTwo.value = true;
    newPassword.value = value;
  }
}

// 再次输入密码验证pass
const validatePassThree = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.newPass) {
    callback(new Error("输入的两次密码不一样!"))
  } else {
    callback()
    vThree.value = true;
    newPassword.value = ruleForm.newPass;
  }
}

const ruleForm = reactive({
  oldPass: '',
  newPass: '',
  checkPass: '',
})

//密码效验注册
const rules = reactive<FormRules<typeof ruleForm>>({
  oldPass: [{ validator: validatePassOne, trigger: 'blur' }],
  newPass: [{ validator: validatePassTwo, trigger: 'blur' }],
  checkPass: [{ validator: validatePassThree, trigger: 'blur' }],
})

//修改密码 -- 没有允许携带用户信息所以无法修改
const newPassword = ref('');
const handleSureEdit = async () => {
  interface IUserInfo {
    newPwd: string,
  }

  const userInfo = ref<IUserInfo>({
    newPwd: newPassword.value,
  })
  const res = await fetchLoginTwentyTwo(userInfo.value)
  console.log(res);
  if (res.data.code === 0) {
    alert('密码修改成功');
    router.push('/')
  } else {
    alert('修改密码失败');
  }
}
</script>

<style scoped>
.box {
  width: 85vw;
  margin-left: 1vw;
  box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw #f0f0f0;
}

.box_header {
  padding: 1vw;
  font-size: 1vw;
  border-bottom: 1px solid #f0f0f0;
}

.box_body {
  height: 155px;
  padding: 1vw;

  >div {
    height: 2vw;
    padding: 1vw;
    font-size: 1vw;
  }
}

.box_foot {
  height: 3vw;
  margin-left: 7.5vw;
}
</style>